<template>
  <div>
    <!-- 采用layout布局 -->
    <el-row :gutter="30">
      <el-col
        :span="12"
        style="margin-bottom: 20px"
        v-for="item in hasHospitalArr"
        :key="item.id"
      >
        <el-card shadow="hover" @click="goDetail(item)">
          <div class="container">
            <div class="left">
              <p class="title">{{ item.hosname }}</p>
              <div class="content">
                <p>
                  <SvgIcon name="good" width="16px" height="16px" />
                  &nbsp;{{ item.param.hostypeString }}
                </p>
                <p>
                  <!-- <Clock style="width: 14px; height: 14px" /> -->
                  <SvgIcon name="clock" width="16px" height="16px" />
                  &nbsp;每天{{ item.bookingRule.releaseTime }}放号
                </p>
              </div>
            </div>
            <div class="right">
              <img
                :src="`data:image/jpeg;base64,${item.logoData}`"
                alt="logo"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Card">
import type { Hospital } from '@/api/home/type'
import { useRouter } from 'vue-router'

// 获取父组件传递的全部医院信息
defineProps(['hasHospitalArr'])
// 创建路由器对象
const router = useRouter()
// 点击医院卡片跳转到详情页面,并传递query参数当前医院的hoscode
const goDetail = (item: Hospital) => {
  router.push({
    name: 'register',
    query: {
      hoscode: item.hoscode,
    },
  })
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: $base-color;
  .left {
    width: 70%;
    .title {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .content {
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      align-items: center;
      p {
        // 让文字和图标对其
        display: flex;
        align-items: center;
      }
    }
  }
  .right {
    img {
      width: 60px;
      height: 60px;
    }
  }
  &:hover {
    color: $base-active-color;
    cursor: pointer;
  }
}
</style>
